<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!-- <div>
        <h2>State</h2>
        <p>{{ $store.state.mdA.user }}</p>
        <p>{{ $store.state.mdA.age }}</p>
        <p>{{ $store.state.mdA.height }}</p>
        <p>{{ $store.state.mdA.weight }}</p>
    </div>

    <div>
        <h2>getters</h2>
        <p>{{ $store.getters.adult }}</p>
    </div>

    <div>
        <h2>mutations</h2>
        <p><button @click="$store.commit('addAge')">addAge</button></p>
    </div>

    <div>
        <h2>actions</h2>
        <p><button @click="$store.dispatch('addAge_Async')">addAge</button></p>
    </div> -->


    <div>
        <h2>State</h2>
        <p>{{ user }}</p>
        <p>{{ age }}</p>
        <p>{{ height }}</p>
        <p>{{ weight }}</p>
    </div>

    <div>
        <h2>getters</h2>
        <p>{{adult }}</p>
    </div>

    <div>
        <h2>mutations</h2>
        <p><button @click="addAge()">addAge</button></p>
    </div>

    <div>
        <h2>actions</h2>
        <p><button @click="addAge_Async()">addAge</button></p>
    </div>

  </div>
</template>

<script>
  // 如果访问模块中的数据

  // 如果没有设置命名空间:
  // 1. 访问模块中的state数据: 对应$store.state.模块名.xxx  => 通过$store.state对应模块名称访问

  // 2. 访问模块中的getters mutations actions数据 => 直接通过根store,对应属性名和方法名访问 (访问getters mutations action 比较方便)  


  import {mapState,mapGetters,mapMutations,mapActions} from "vuex";

  // mapState,mapGetters,mapMutations,mapActions 默认映射根Store中的数据和方法
  // mapState("moduleName",[])   映射函数,还可以接收一个字符串,用于执行需要映射的模块


  export default {
    name:"MdaView",
    computed:{
      // 没有使用命名空间 => 以下写法有问题
      // ...mapState("mdA",["user","age","height","weight"]),
      ...mapState({
        user:(state)=>state.mdA.user,
        age:(state)=>state.mdA.age,
        height:(state)=>state.mdA.height,
        weight:(state)=>state.mdA.weight,
      }),
      ...mapGetters(["adult"])
    },
    methods:{
      ...mapMutations(["addAge"]),
      ...mapActions(["addAge_Async"]),
    },
    mounted(){
      console.log("根store",this.$store);
    },
  }

</script>
